// 1,
import Vue from 'vue'
import VueRouter from 'vue-router' // 注册插件

// 2，导入需要进行路由的组件
import login from '@/views/login/index.vue'
import register from '@/views/register/index.vue'
import layout from '@/views/layout/index.vue'
import detail from '@/views/detail/index.vue'
// 二级路由页面组件
import article from '@/views/article/index.vue'
import like from '@/views/like/index.vue'
import collect from '@/views/collect/index.vue'
import user from '@/views/user/index.vue'
// 404页面
import NotFound from '@/views/404.vue'
Vue.use(VueRouter)
// 3，定义路由规则
const routes = [
  {
    // 如果url，没有hash，就重定向跳转到首页组件
    path: '/',
    redirect: '/layout'
  },
  {
    path: '/login', // 每个path对应一个页面组件
    component: login
  },
  {
    path: '/register',
    component: register
  },
  {
    path: '/layout',
    component: layout,
    children: [
      {
        path: '',
        redirect: '/layout/user'
      },
      {
      // path 不用加 /
      // 加 / 就需要写全 否则认为根目录
        path: 'article',
        component: article
      },
      {
        path: 'like',
        component: like
      },
      {
        path: 'collect',
        component: collect
      },
      {
        path: 'user',
        component: user
      }]
  },
  {
    path: '/login',
    component: detail
  },
  // 匹配上面没有
  {
    path: '*',
    redirect: '/404'
  },
  {
    path: '/404',
    component: NotFound
  }
]
// 4，创建router 实例然后传入 “routes’ 配置
const router = new VueRouter({
  routes
})
// 5，导出 router 实例
export default router
